<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--font-family-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&amp;subset=devanagari,latin-ext" rel="stylesheet">

    <!-- title of site -->
    <title>Sign in</title>

   <%-- <!-- For favicon png -->
    <link rel="shortcut icon" type="image/icon" href="${pageContext.request.contextPath}/img/favicon.png"/>--%>

    <!--font-awesome.min.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/font-awesome.min.css">

    <!--animate.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/animate.css">

    <!--bootstrap.min.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/bootstrap.min.css">

    <!-- bootsnav -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/bootsnav.css" >

    <!--style.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/style.css">
    <!--responsive.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userLogin/responsive.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript">
          $(function () {
              $("#login").click(function () {
                  var uName=$("#uName").val();
                  var password=$("#password").val();

                  if (uName == '' || password == ''){
                      alert("错误，用户名和密码出现错误！")
                      return;
                  }
                  $.ajax({
                      url:"${pageContext.request.contextPath}/doUserLogin",
                      type : "POST",
                      data:{
                          usersName:uName,
                          password:password
                      },
                      dataType:"text",
                      success:function (data) {
                          if (data!=null){
                              alert("登录成功")
                              window.location.href = "${pageContext.request.contextPath}/index";
                          }else{
                              alert("错误，用户名和密码出现错误！")
                          }
                      },error:function () {
                          alert("服务器崩溃")
                      }
                  })
              })
          })

        $(function(){
            $(".name input").focus(function(){
                $(this).prev("i").css({"background-image":"url(${pageContext.request.contextPath}/img/user2.png)"});
            });
            $(".name input").blur(function(){
                $(this).prev("i").css({"background-image":"url(${pageContext.request.contextPath}/img/user1.png)"});
            });
            $(".password input").focus(function(){
                $(this).prev("i").css({"background-image":"url(${pageContext.request.contextPath}/img/password2.png)"});
            });
            $(".password input").blur(function(){
                $(this).prev("i").css({"background-image":"url(${pageContext.request.contextPath}/img/password1.png)"});
            });
        });
    </script>

</head>
<body style="overflow-y: hidden">

<!-- signin end -->
<section class="signin">
    <div class="container-fluid">
        <div class="row">

            <div class="col-sm-5">
                <div class="single-sign">
                    <div class="sign-bg">
                         <img src="${pageContext.request.contextPath}/img/tsw.jpg" style="background-size: cover; background-position: center; height: 974px;">
                        <!--/.sign-bg 图片-->
                    </div><!--/.sign-bg -->
                </div><!--/.single-sign -->
            </div><!--/.col -->

            <div class="col-sm-7">



                <div class="single-sign">
                    <div style="border: 1px solid white;margin-left: 650px;">
                        <div style="float: left; width: 60px;height: 60px; margin-top: 12px;"><a href="${pageContext.request.contextPath}/toChineseS?locale=zh_CN"><img src="${pageContext.request.contextPath}/img/CH.ico" width="40" height="40" STYLE="padding-bottom: 8px">&nbsp;&nbsp;CH</a></div>
                        <div style="float: left; margin-top: 7px;width: 60px;height: 60px;"><a href="${pageContext.request.contextPath}/toEnglishS?locale=en_US"><img src="${pageContext.request.contextPath}/img/USA.ico" width="46" height="46">USA</a></div>
                    </div>
                    <div class="sign-content">
                        <h2><spring:message code="userLogins"/></h2>

                        <div class="signin-form">
                            <div class=" ">
                                <div class=" ">
                                        <div class="form-group">
                                            <label for="signin_form"><spring:message code="user"/></label>
                                            <input type="userName" name="uName" id="uName" class="form-control" id="signin_form" placeholder="info@abc.com">
                                        </div><!--/.form-group -->
                                        <div class="form-group">
                                            <label for="signin_form"><spring:message code="passworda"/></label>
                                            <input type="password" name="password" id="password" class="form-control" id="signin_form" placeholder="Password">
                                        </div><!--/.form-group -->
                                </div><!--/.col -->
                            </div><!--/.row -->

                        </div><!--/.signin-form -->
                        <div class="signin-password">
                            <div class="awesome-checkbox-list">
                                <ul class="unstyled centered">

                                    <li>
                                        <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2">
                                        <label for="styled-checkbox-2"><spring:message code="keepLogin"/></label>
                                    </li>

                                    <li>
                                        <a href="#"><spring:message code="forget"/></a>
                                    </li>

                                </ul>
                            </div><!--/.awesome-checkbox-list -->
                        </div><!--/.signin-password -->



                        <div class="signin-footer">
                            <button type="submit" class="btn signin_btn" data-toggle="modal" data-target=".signin_modal"  id="login">
                                <spring:message code="Login"/>
                            </button>
                            <p>
                                <spring:message code="NotAccount"/>
                                <a href="${pageContext.request.contextPath}/register"><spring:message code="reg"/></a>
                            </p>
                        </div><!--/.signin-footer -->

                    </div><!--/.sign-content -->


                </div><!--/.single-sign -->
            </div><!--/.col -->
        </div><!--/.row-->
    </div><!--/.container -->
</section><!--/.signin -->

<!-- signin end -->

<!--footer copyright start -->
<footer class="footer-copyright">
    <div id="scroll-Top">
        <i class="fa fa-angle-double-up return-to-top" id="scroll-top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
    </div><!--/.scroll-Top-->

</footer><!--/.hm-footer-copyright-->
<!--footer copyright  end -->
<!-- Include all js compiled plugins (below), or include individual files as needed -->

<script src="${pageContext.request.contextPath}/js/jquery.js"></script>

<!--modernizr.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<!--bootstrap.min.js-->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<!-- bootsnav js -->
<script src="${pageContext.request.contextPath}/js/bootsnav.js"></script>

<!-- jquery.sticky.js -->
<script src=${pageContext.request.contextPath}/js/jquery.sticky.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>


<!--Custom JS-->
<script src=${pageContext.request.contextPath}/js/custom.js"></script>

</body>
</html>
